<template>
  <el-dialog title="配置" :visible.sync="dialogVisible" :close-on-click-modal="false" @close="onClose()" width="52%"
             top="10vh" append-to-body v-draggable>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick" class="mt-3" :before-leave="beforeLeave">
      <el-tab-pane v-for="item in tabList" :key="item" :label="'区域' + item" :name="item"></el-tab-pane>
    </el-tabs>
    <el-form ref="form" :model="form" label-width="100px" class="d-flex flex-wrap">
      <el-form-item label="选择分母设备" prop="childrenDeviceCodeFM" class="mr-3">
        <el-select v-model="form.childrenDeviceCodeFM" placeholder="请选择" @change="getCode(1)">
          <el-option v-for="item in options" :key="item.deviceCode" :label="item.deviceName"
                     :value="item.deviceCode"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择参数" prop="childrenParameterCodeFM" class="mr-3">
        <el-select v-model="form.childrenParameterCodeFM" placeholder="请选择">
          <el-option v-for="item in codeFM" :key="item.parameterCode" :label="item.parameterName"
                     :value="item.parameterCode"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="参数描述" prop="descFM" class="mr-3">
        <el-input v-model="form.descFM" placeholder="请输入参数描述"/>
      </el-form-item>
      <el-form-item label="选择分子设备" prop="childrenDeviceCodeFZ" class="mr-3">
        <el-select v-model="form.childrenDeviceCodeFZ" placeholder="请选择" @change="getCode(2)">
          <el-option v-for="item in options" :key="item.deviceCode" :label="item.deviceName"
                     :value="item.deviceCode"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="选择参数" prop="childrenParameterCodeFZ" class="mr-3">
        <el-select v-model="form.childrenParameterCodeFZ" placeholder="请选择">
          <el-option v-for="item in codeFZ" :key="item.parameterCode" :label="item.parameterName"
                     :value="item.parameterCode"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="参数描述" prop="descFZ" class="mr-3">
        <el-input v-model="form.descFZ" placeholder="请输入参数描述"/>
      </el-form-item>
      <el-form-item label="百分比名称" prop="childrenName" class="mr-3">
        <el-input v-model="form.childrenName" placeholder="请输入百分比名称"/>
      </el-form-item>
    </el-form>
    <div class="d-flex justify-content-end">
      <el-button type="primary" icon="el-icon-plus" @click="addItem">添加</el-button>
    </div>
    <el-table :data="tableData" border class="my_table mt-4" height="30vh" ref="multipleTable">
      <el-table-column prop="startNumber" label="大于等于" align="center"></el-table-column>
      <el-table-column prop="endNumber" label="小于" align="center"></el-table-column>
      <el-table-column prop="showName" label="描述" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="{ row }">
          <el-button type="danger" size="mini" @click="onDel(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="onSubmit()">保 存</el-button>
      <el-button @click="onClose()">取 消</el-button>
    </span>
    <!-- 新增百分比配置 -->
    <addPer ref="addPer"></addPer>
  </el-dialog>
</template>

<script>
  import addPer from "./addPer.vue"
  import { queryDeviceRealDataInfo } from "@/api/projectOverview/index"
  import { insertOrUpdateVVisualizationDetail } from "@/api/chartControl/index"

  export default {
    components: {
      addPer
    },
    data() {
      return {
        twoList: [],
        configCode: null,
        partIndex: null,
        activeName: "1",
        form: {
          descFM: "",
          descFZ: "",
          childrenName: "",
          childrenDeviceCodeFM: "",
          childrenParameterCodeFM: "",
          childrenDeviceCodeFZ: "",
          childrenParameterCodeFZ: ""
        },
        tabList: [],
        tableData: [],
        options: [],
        codeFM: [],
        codeFZ: [],
        bfbItems: [],
        dialogVisible: false
      }
    },
    methods: {
      editAndShow() {
        for (let i = 0; i < this.twoList.length; i++) {
          // this["arr" + this.items[i].inIndex] = [this.items[i]]
        }
        this.handleClick()
      },

      getCode(type) {
        let code = type == 1 ? this.form.childrenDeviceCodeFM : this.form.childrenDeviceCodeFZ
        queryDeviceRealDataInfo({
          deviceCode: code
        }).then((res) => {
          if (type == 1) {
            this.codeFM = res.object
            this.form.childrenParameterCodeFM = ""
          } else {
            this.codeFZ = res.object
            this.form.childrenParameterCodeFZ = ""
          }
        })
      },

      onSubmit() {
        if (this.activeName == this.activeName[this.activeName.length - 1]) {
          this.beforeLeave(this.activeName, this.activeName)
        }
        let obj = {
          tkType: 2,
          configCode: this.configCode,
          partIndex: this.partIndex,
          bfbItems: this.bfbItems
        }
        obj = JSON.stringify(obj)
        insertOrUpdateVVisualizationDetail({ items: obj }).then((res) => {
          this.$message({
            type: "success",
            message: res.message
          })
          this.onClose()
        })
      },

      beforeLeave(newName, oldActiveName) {
        let obj = {
          inIndex: oldActiveName,
          childrenName: this.form.childrenName,
          childrenDeviceCodeFM: this.form.childrenDeviceCodeFM,
          childrenDeviceNameFM: this.options.find((ele) => ele.deviceCode == this.form.childrenDeviceCodeFM)
            ? this.options.find((ele) => ele.deviceCode == this.form.childrenDeviceCodeFM).deviceName
            : "",
          childrenParameterCodeFM: this.form.childrenParameterCodeFM,
          childrenParameterNameFM: this.form.descFM,
          // childrenParameterNameFM: this.codeFM.find(ele => ele.parameterCode == this.form.childrenParameterCodeFM) ? this.codeFM.find(ele => ele.parameterCode == this.form.childrenParameterCodeFM).parameterName : '',
          childrenDeviceCodeFZ: this.form.childrenDeviceCodeFZ,
          childrenDeviceNameFZ: this.options.find((ele) => ele.deviceCode == this.form.childrenDeviceCodeFZ)
            ? this.options.find((ele) => ele.deviceCode == this.form.childrenDeviceCodeFZ).deviceName
            : "",
          childrenParameterCodeFZ: this.form.childrenParameterCodeFZ,
          childrenParameterNameFZ: this.form.descFZ,
          // childrenParameterNameFZ: this.codeFZ.find(ele => ele.parameterCode == this.form.childrenParameterCodeFZ) ? this.codeFZ.find(ele => ele.parameterCode == this.form.childrenParameterCodeFZ).parameterName : '',
          bfbRules: this.tableData
        }
        let index = this.bfbItems.findIndex((item) => item.inIndex == oldActiveName)
        if (index == -1) {
          this.bfbItems.push(obj)
        } else {
          this.bfbItems[index] = obj
        }
      },

      handleClick() {
        this.form.childrenDeviceCodeFM = this.bfbItems.find((val) => val.inIndex == this.activeName)
          ? this.bfbItems.find((val) => val.inIndex == this.activeName).childrenDeviceCodeFM
          : ""
        this.form.childrenDeviceNameFM = this.bfbItems.find((val) => val.inIndex == this.activeName)
          ? this.bfbItems.find((val) => val.inIndex == this.activeName).childrenDeviceNameFM
          : ""
        this.form.childrenParameterCodeFM = this.bfbItems.find((val) => val.inIndex == this.activeName)
          ? this.bfbItems.find((val) => val.inIndex == this.activeName).childrenParameterCodeFM
          : ""
        this.form.childrenDeviceCodeFZ = this.bfbItems.find((val) => val.inIndex == this.activeName)
          ? this.bfbItems.find((val) => val.inIndex == this.activeName).childrenDeviceCodeFZ
          : ""
        this.form.childrenDeviceNameFZ = this.bfbItems.find((val) => val.inIndex == this.activeName)
          ? this.bfbItems.find((val) => val.inIndex == this.activeName).childrenDeviceNameFZ
          : ""
        this.form.childrenParameterCodeFZ = this.bfbItems.find((val) => val.inIndex == this.activeName)
          ? this.bfbItems.find((val) => val.inIndex == this.activeName).childrenParameterCodeFZ
          : ""
        this.tableData = this.bfbItems.find((val) => val.inIndex == this.activeName) ? this.bfbItems.find((val) => val.inIndex == this.activeName).bfbRules : []
        this.form.descFM = this.bfbItems.find((val) => val.inIndex == this.activeName) ? this.bfbItems.find((val) => val.inIndex == this.activeName).childrenParameterNameFM : ""
        this.form.descFZ = this.bfbItems.find((val) => val.inIndex == this.activeName) ? this.bfbItems.find((val) => val.inIndex == this.activeName).childrenParameterNameFZ : ""
        this.form.childrenName = this.bfbItems.find((val) => val.inIndex == this.activeName) ? this.bfbItems.find((val) => val.inIndex == this.activeName).childrenName : ""
        this.codeFM = []
      },

      addItem() {
        this.$refs.addPer.viewIndex = this.activeName
        this.$refs.addPer.dialogVisible = true
      },

      onDel(data) {
        this.$confirm("确定删除该条数据?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            let index = this.tableData.indexOf(data)
            if (index > -1) this.tableData.splice(index, 1)
            this.$message({
              type: "success",
              message: "删除成功!"
            })
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            })
          })
      },

      onClose() {
        this.activeName = "1"
        this.options = []
        this.codeFM = []
        this.codeFZ = []
        this.tabList = []
        this.tableData = []
        this.bfbItems = []
        this.$refs["form"].resetFields()
        this.dialogVisible = false
      }
    }
  }
</script>

<style lang="scss" scoped>
  ::v-deep .el-dialog {
    border-radius: 8px;

    .el-dialog__body {
      max-height: 70vh;
      overflow-y: auto;
      padding: 10px 20px;
    }

    .el-dialog__footer {
      text-align: center !important;
    }
  }

  ::v-deep .el-dialog__header {
    border-radius: 8px 8px 0 0;
    background-color: #e6e6e6;
  }

  .ml-3 {
    margin-left: 12px;
  }

  .my_span {
    font-size: 16px;
  }

  // ::v-deep .el-table {

  //     tr th {
  //         background-color: #e6e6e6;
  //         border-right: none;
  //     }
  // }
</style>
